<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<style>
			[v-cloak] {
				display: none;
			}
			.inner {
				background-color: aquamarine;
				height: 400px;
				width: 90%;
			}
      .italic{
        font-style: italic;
      }
      .active{
        font-weight: 800
      }
      .red {
        background-color: red;
      }
      .thin{
        font-weight: 200
      }
		</style>
	</head>

	<body>
		<script src="./lib/vue-2.6.10/dist/vue.min.js"></script>
		<!-- vue实例所控制的这个元素区域，就是我们的 v -->
		<div id="app">
			<p>{{ msg }}</p>
			<!-- 使用v-cloak解决插值表达式的闪烁问题，前后可以放任意内容 -->
			<p v-cloak>+++++{{ msg }}------</p>
			<!-- 默认v-text没有闪烁问题 ,会覆盖元素中原本的内容，但插值表达式不会-->
			<h4 v-text="msg">=========</h4>
			<div v-html="msg2"></div>

			<!-- @ === v-on: -->
			<input
				type="button"
				value="按钮"
				:title="mytitle + '123' "
				@click="show"
			/>

			<input type="button" value="浪起来" @click="lang" />
			<input type="button" value="低调" @click="stop" />
			<h4>{{ msg3 }}</h4>

			<!-- 使用 .stop组织冒泡，
        .prevent 阻止默认行为
        .self 实现只有点击当前元素时才会触发事件处理函数，只管自己，不顾冒泡
        .once 只触发一次事件处理函数

        三元表达式改造： :class="['inner','italic',{'active':flag}]"
        在为class使用v-bind 绑定对象的时候，对象的属性是类名，由于 对象的属性可带引号，
        也可不带引号，所以这里我没写引号； 属性的值 是一个标识符
        :class="[inner：true,'italic',{'active':flag}]"
       -->
       <div :class="classObj">这是一个很大很大的h1，大到你无法想象</div>
			<div :class="['inner','italic',flag?'active': '']" @click="handleDiv">
        hello hello world
				<input  :style="{width: '200px'}" type="button" value="戳它" @click.stop="btnHandle" />
			</div>

			<div>{{ msg4 }}</div>
			<!-- v-model 只能用在表单元素中：input(radio,text,checkbox,address,email...select checkbox texterea) -->
			<input type="text" v-model:value="msg4" style="width: 100%" />

			<input type="text" v-model="n1" />
			<select v-model="opt">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="text" v-model="n2" />
			<input type="button" value="=" @click="calc" />
      <input type="text" v-model="result" />
      
      <p v-for="item in list">{{item}}</p>

      <p v-for="(val, key, i) in user">值：{{val}} --- 键：{{key}}---索引：{{i}}</p>
      

		</div>

		<script>
			//创建一个vue的实例
			//当我们导入包之后，在浏览器的内存中，就多了一个vue构造函数
			//注意：我们new出来的这个 vm 对象， 就是我们 mvvm 中的 vm 调度者
			var vm = new Vue({
				el: "#app",
				//这里的data就是 mvvm 中的m 专门用来保存每个页面数据的
				data: {
					msg: "welcome to learn vue", //通过vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作dom了
					msg2: "<h1>hello world</h1>",
					mytitle: "这是一个自己定义的title",
					msg3: "猥琐发育，别浪～～！",
					msg4: "我们都是好学生，爱学习爱敲代码，爱思考，简直是完美，没毛病",
					intervalId: null,
					n1: 0,
					n2: 0,
					result: 0,
          opt: "+",
          flag: true,
          classObj: {red: true, thin: true, italic: false, active: false},
          styleObj1: {color: 'red','font-weight': 200},
          styleObj2: {height: '100px'},
          list: [1,2,3,4,5],
          user: {
            id: 1,
            name: 'zhoujielun',
            gender: 'male'
          }
				},
				methods: {
					show: () => {
						alert("hello");
					},
					lang() {
						console.log(this.msg3);
						if (this.intervalId != null) return;
						this.intervalId = setInterval(() => {
							var start = this.msg3.substring(0, 1);
							var end = this.msg3.substring(1);
							this.msg3 = end + start;
						}, 400);
					},
					stop() {
						clearInterval(this.intervalId);
						//每当清除定时器之后，需要重新把定时器设为null
						this.intervalId = null;
					},
					handleDiv() {
						console.log("触发div");
					},
					btnHandle() {
						console.log("触发button");
					},
					calc() {
						switch (this.opt) {
							case "+":
								this.result = parseInt(this.n1) + parseInt(this.n2);
								break;
							case "-":
								this.result = parseInt(this.n1) - parseInt(this.n2);
								break;
							case "*":
								this.result = parseInt(this.n1) * parseInt(this.n2);
								break;
							case "/":
								this.result = parseInt(this.n1) / parseInt(this.n2);
								break;
            }
            //注意： 这时投机取巧的方式，正式开发中，尽量少用
            // var codeStr = 'parseInt(this.n1)' +this.opt + 'parseInt(this.n2)'
            // this.result = codeStr;
					}
				}
			});
		</script>
	</body>
</html>
